// import { Button} from 'element-puls'
function createEditorConfig() {
    let componentList = []
    let componentMap = {}

    return {
        componentList,
        componentMap,
        register(component) {
            componentList.push(component)
            componentMap[component.key] = component
        }
    }
}

export const registerConfig = createEditorConfig()

// 创建文本框
const createInputProp = (label) => ({ type: 'input',  label })
// 创建颜色
const createColorProp = (label) => ({ type: 'color',  label })
// 创建下拉框
const createSelectProp = (label, options) => ({ type: 'select', label, options})

registerConfig.register({
    label: '文本',
    key: 'text',
    preview: () => <el-text>文本</el-text>,
    render: (props) => {
        console.log('propspropsprops', props)
        return <el-text style={{fontSize: props.fontSize, color: props.color}}>{props.text || '默认文本'}</el-text>
    },
    props: {
        text: createInputProp('文本内容'),
        fontSize: createInputProp('尺寸'),
        color: createColorProp('颜色')
    }
})

registerConfig.register({
    label: '按钮',
    key: 'button',
    preview: () => <el-button>按钮</el-button>,
    render: (props) => <el-button type={props.type} size={props.size}>{props.text || '按钮'}</el-button>,
    props: {
        text: createInputProp('文本内容'),
        size: createSelectProp('尺寸', [
            { label: '小', value: 'small' },
            { label: '中', value: 'default' },
            { label: '大', value: 'large' },
        ]),
        type: createSelectProp('按钮类型', [
            { label: '默认', value: 'default' },
            { label: '蓝色', value: 'primary' },
            { label: '成功', value: 'success' },
            { label: '普通', value: 'info' },
            { label: '警告', value: 'warning' },
            { label: '危险', value: 'danger' },
        ]),
    }
})

registerConfig.register({
    label: '输入框',
    key: 'input',
    preview: () => <el-input placeholder="输入框"></el-input>,
    render: (props) => <el-input placeholder="输入框" value={props.text}></el-input>,
    props: {
        text: createInputProp('文本内容'),
        width: createInputProp('宽度'),
        height: createInputProp('高度'),
    }
})



